<template>
    <!-- 需要和gridList组件通信  给该组件传入数据 (被选中的分类) -->

    <!-- 具名插槽  => 会被传入的内容替换(前提是有内容传入, 否则就是用后备内容) -->
    <slot name="a">1111</slot>
    <slot name="b">2222</slot>
    <van-sidebar v-model="activeCategory">
        <van-sidebar-item v-for="item, index in categoryList" :key="index" :title="(item as unknown as string).trim()" />
    </van-sidebar>
</template>

<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, reactive, computed, onMounted, watchEffect } from 'vue';
import { getCategoryListAPI, getBrandListAPI } from "@/api/product";
import { useSlots,useAttrs } from 'vue';

import RenderContent from "@/components/RenderContent.vue"

// 组合式语法中如何接收父组件传入的数据 (属性/方法)  自定义事件()  v-model(传入的数据)

let props = defineProps(["a", "b"]);  // 接收父组件传入的数据(props)
let emits = defineEmits(["update:a","update:modelValue"]);  // 接收父组件传入的自定义事件
let module = defineModel("modelValue"); // 接收父组件传入的数据(以v-model:aaa="aaa");

let slots = defineSlots(); // 接收父组件传入的插槽内容  => 对应插槽名称替换<slot name=xxx></slot>



/* 
useSlots,useAttrs  官方封装的辅助函数  以下是模拟封装: 
function useSlots(){
    const curr = getCurrentInstance();
    const slots = curr?.slots;
    return slots;
}

function useAttrs(){
    const curr = getCurrentInstance();
    const attrs = curr?.attrs;
    return attrs;
}


*/

let slots1 = useSlots();  //  接收父组件传入的插槽内容

let attrs = useAttrs(); // 接收父组件传入的属性 (没有通过props属性接受的)






// 可以以选项式写法定义组件配置项
defineOptions({
    name:"xxx",
    inheritAttrs:false,
})



console.log(111, props);
console.log(222, emits);  // 如何触发  emits("aaa")
console.log(333, module);
console.log(444, slots);
console.log(444, slots1);
console.log(555, attrs);










let activeCategory = ref(0);
let categoryList = ref([]);


const getActiveCategory = ()=>{
    console.log("组件内暴露方法测试,父组件可以通过ref名获取当前组件,调用方法");
    return  activeCategory.value;
}


const getCategoryList = async () => {
    try {
        let result = await getCategoryListAPI();
        console.log("分类列表请求成功", result);
        categoryList.value = result.data;

    } catch (err: any) {
        // showFailToast(err.message);
    }
}


// defineExpose(); //当前组件 向外暴露的方法  可以先通过ref获取组件, 在通过组件实例使用  this.$refs.xxx.方法名()
defineExpose({
    getActiveCategory,
    categoryList,
});

onMounted(async () => {
    await getCategoryList();

    emits("update:a", 10);
    emits("update:modelValue", '显卡');
})

</script>

<style scoped></style>